<template>
	<view id="submitAuth">
		<view class="submit-auth-title">
			<view class="title">
				请根据实际情况认证您的身份，填写虚假信息由您本人承担全部责任！
			</view>
		</view>
		<ul class="auth-wrap">
			<li class="norm-single-li auth-info">
				<h5>姓名</h5>
				<p>{{ruleForm.full_name}}</p>
			</li>
			<li class="norm-single-li auth-info">
				<h5>电话</h5>
				<p>{{ruleForm.telephone}}</p>
			</li>
			<li class="norm-single-li auth-info">
				<h5>小区名称</h5>
				<p>{{proName}}</p>
			</li>
			<li class="norm-single-li auth-info">
				<h5>身份证正面</h5>
				<p>
					<view class="guarn-box">
						<view  class="guarn-box-img" @click="uoloadHouse(1)" v-if="!imgFlag1">
							<image  src="../../static/image/zhengSf.png" mode=""></image>
						</view>
						<view v-else class="guarn-box2-img">
							<image @click="imageBig(img1)" :src="img1" style="width: 100%;height: 100%;"></image>
							<u-icon  @click="colseImg(1)" name="close" color="red" size="40" class="guarn-box2-img-close"></u-icon>
						</view>
					</view>
				</p>
			</li>
			<li class="norm-single-li auth-info">
				<h5>身份证反面</h5>
				<p>
					<view class="guarn-box">
						<view  class="guarn-box-img" @click="uoloadHouse(2)" v-if="!imgFlag2">
							<image  src="../../static/image/fanSf.png" mode=""></image>
						</view>
						<view v-else class="guarn-box2-img">
							<image  @click="imageBig(img2)" :src="img2" style="width: 100%;height: 100%;"></image>
							<u-icon  @click="colseImg(2)" name="close" color="red" size="40" class="guarn-box2-img-close"></u-icon>
						</view>
					</view>
				</p>
			</li>
		</ul>
		<u-button class="bottom-btn" :custom-style="customStyle" @click="next">下一步</u-button>
		
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
  import color from "../../uview-ui/libs/function/color";
	export default{
		data(){
			return{
				vote_id : null,
				proName : null,
				//保存信息
				ruleForm:{
					essential_information_id :  null,
					user_id:'',//用户id
					user_id_zyw: null,
					full_name:'',//用户姓名
					telephone:'',//用户电话
					id_card_just:'',//身份证正面
					id_card_back:'',//身份证反面
					house_name:'',//小区名称
				},
				
				imgArr:[],//上传照片
				imgFlag1:false,
				img1:'',
				imgFlag2:false,
				img2:'',
				customStyle: {
					marginTop: "100rpx", // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					background: 'linear-gradient(180deg, #76D904 0%, #417505 100%)',
					borderRadius: '44rpx',
					color: "#ffffff",
					width: "570rpx",
					heght:'88rpx'
				},
				userData:{},
				voteEsenData:{},
				user_id: uni.getStorageSync('rawData').userId,
				ownerInformation:{},
				
			}
		},
		onLoad(option) {
			this.vote_id = option.vote_id
			this.proName = option.proName;
			this.ruleForm.house_name =  option.proName
		},
		onShow() {
			let _this = this;
			let rawData = uni.getStorageSync('rawData');
			this.ruleForm.user_id = rawData.userId;
			this.ruleForm.user_id_zyw = rawData.userId;
			this.ruleForm.full_name = rawData.userName;
			this.ruleForm.telephone = rawData.userTel;
			this.ruleForm.user_id = rawData.userId;
			this.ruleForm.essential_information_id = this.vote_id;
		},
		
		methods:{
			imageBig(url){
				uni.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				})
			},

			next(){
				this.ruleForm.id_card_back=this.img1 || null;
				this.ruleForm.id_card_just=this.img2 || null;
				if(!this.ruleForm.id_card_back ||!this.ruleForm.id_card_just ){
					uni.showToast({
						title: '请上传身份证',
						icon:'none',
						duration: 2000
					});
					return;
				}
				//关闭当前页面，跳转至对应页面
				uni.redirectTo({
				    url:'./submitAuthTwo?voteUserInfo=' + JSON.stringify(this.ruleForm)
				});
				
			},
			//关闭图片
			colseImg(status){
				if(status == 1){
					this.img1 = ''
					this.imgFlag1 = false;
				  //_this.ruleForm.indoor_images = res.data.data
				}else{
					this.img2 = ''
					this.imgFlag2 = false;
				}
			},
			// 选择图片
			uoloadHouse(status) {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 9, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											if(status == 1){
												_this.img1 = res.data.data;
												_this.imgFlag1 = true;
											  //_this.ruleForm.indoor_images = res.data.data
											}else{
												_this.img2 = res.data.data;
												_this.imgFlag2 = true;
											}
										})
									})
								}
			
							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album'],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											if(status == 1){
												_this.img1 = res.data.data;
												_this.imgFlag1 = true;
											  //_this.ruleForm.indoor_images = res.data.data
											}else{
												_this.img2 = res.data.data;
												_this.imgFlag2 = true;
											}
										})
									})
								}
			
							});
						}
					},
					fail: function(res) {}
				});
			},
		}
	}
</script>

<style lang="scss">
  $color: #333;
	#submitAuth{
		.submit-auth-title{
			background: #F4F4F4;
			font-size: 26rpx;
			font-weight: bold;
			height: 116rpx;
			.title{
				padding:26rpx 40rpx;
				
			}
		}
		.auth-wrap{
			margin:20rpx 30rpx;
		}
		.auth-info {
			border-bottom: 1px solid #e3e3e3;
		
			h5{
				font-size: 32rpx;
				color:$color;
				font-weight: bold;
			}
		
			p {
				color: $color;
				font-size: 32rpx;
				width: 440rpx;
				text-align: right;
				font-weight: bold;
			}
			.guarn-box{
				width: 100%;
				height: 216rpx;
			}
			.guarn-box-img{
				width: 183px;
				height: 216rpx;
				float: right;
				margin-right: 24rpx;
				text-align: center;
				border: 2rpx solid #ccc;
				border-radius: 4rpx;
				border-radius: 28rpx;
			}
			.guarn-box-img image{
				width: 100%;
				height: 100%;
			}
			
			.guarn-box2-img{
				// width:216rpx;
				height: 216rpx;
				margin-right: 20rpx;
				position: relative;
				.guarn-box2-img-close{
					position: absolute;
					top: 0rpx;
					right: 0rpx;
				}
			}
		}
		
	}
</style>